<template>
    <el-dialog :model-value="dialogVisible" :destroy-on-close="true" :title="dialogTitle" width="600px"
        @close="emits('closeDialog')">
        <el-form ref="dialogFormRef" :model="dialogForm" :label-width="formLabelWidth" :rules="rules">
            <el-form-item label="商户ID" prop="merchant_id">
                <el-input v-model="dialogForm.merchant_id" placeholder="请输入商户ID，参考现有商户ID格式，不能和已有的ID重复" />
            </el-form-item>
            <el-form-item label="商户类型" prop="account_type">
                <el-radio-group v-model="dialogForm.account_type">
                    <el-radio key="1" :label="1">企业</el-radio>
                    <el-radio key="2" :label="2">个人</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="企业名称" prop="company_name">
                <el-input v-model="dialogForm.company_name" />
            </el-form-item>
            <el-form-item label="企业别名" prop="company_alias">
                <el-input v-model="dialogForm.company_alias" />
            </el-form-item>
            <el-form-item label="企业经营范围" prop="company_business">
                <el-input v-model="dialogForm.company_business" />
            </el-form-item>
            <el-form-item label="联系地址" prop="address">
                <el-input v-model="dialogForm.address" />
            </el-form-item>
            <el-form-item label="联系人" prop="real_name">
                <el-input v-model="dialogForm.real_name" />
            </el-form-item>
            <el-form-item label="联系方式" prop="contact">
                <el-input v-model="dialogForm.contact" />
            </el-form-item>
            <el-form-item label="企业网站" prop="website">
                <el-input v-model="dialogForm.website" />
            </el-form-item>
            <el-form-item label="银行名称" prop="bank_name">
                <el-input v-model="dialogForm.bank_name" />
            </el-form-item>
            <el-form-item label="银行卡号" prop="bank_card_number">
                <el-input v-model="dialogForm.bank_card_number" />
            </el-form-item>
            <el-form-item label="银行国家" prop="bank_country">
                <el-input v-model="dialogForm.bank_country" />
            </el-form-item>
            <el-form-item label="银行城市" prop="bank_city">
                <el-input v-model="dialogForm.bank_city" />
            </el-form-item>
            <el-form-item label="银行地址" prop="bank_address">
                <el-input v-model="dialogForm.bank_address" />
            </el-form-item>
            <el-form-item label="swift码" prop="bank_swift">
                <el-input v-model="dialogForm.bank_swift" />
            </el-form-item>
            <el-form-item label="IBAN码" prop="bank_iban">
                <el-input v-model="dialogForm.bank_iban" />
            </el-form-item>
            <el-form-item label="银行卡支持币种" prop="currency">
                <el-input v-model="dialogForm.currency" />
            </el-form-item>
            <el-form-item label="银行卡预留手机号">
                <el-input v-model="dialogForm.phone" />
            </el-form-item>
            <el-form-item label="银行卡预留邮箱">
                <el-input v-model="dialogForm.email" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emits('cancel')">取消</el-button>
                <el-button type="primary" @click="submit(dialogForm)" :loading="btnLoading">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from "vue";
const dialogFormRef = ref(null);

defineProps({
    dialogVisible: {
        type: Boolean,
        default: false,
    },
    dialogForm: {
        type: Object,
        default: {
            id: "",
            merchant_id: "",
            account_type: "",
            company_name: "",
            company_alias: "",
            company_business: "",
            real_name: "",
            contact: "",
            website: "",
            address: "",
            bank_name: "",
            bank_country: "",
            bank_city: "",
            bank_address: "",
            bank_card_number: "",
            bank_swift: "",
            bank_iban: "",
            currency: "",
            phone: "",
            email: ""
        },
    },
    btnLoading: {
        type: Boolean,
        default: false,
    },
    dialogTitle: {
        type: String,
        default: ""
    }
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);

const formLabelWidth = "150px";
// 校验
const rules = {
    merchant_id:  [{ required: true, message: "请输入商户ID", trigger: "blur" }],
    account_type: [{ required: true, message: "请选择商户类型", trigger: "change" }],
    company_name: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
    company_business: [{ required: true, message: "请输入企业经营范围", trigger: "blur" }],
    real_name: [{ required: true, message: "请输入联系人真实姓名", trigger: "blur" }],
    contact: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
    address: [{ required: true, message: "请输入企业/个人联系地址", trigger: "blur" }],
    bank_name: [{ required: true, message: "请输入银行名称", trigger: "blur" }],
    bank_card_number: [{ required: true, message: "请输入银行卡号", trigger: "blur" }],
    bank_country: [{ required: true, message: "请输入国家", trigger: "blur" }],
    bank_address: [{ required: true, message: "请输入银行地址", trigger: "blur" }],
    currency: [{ required: true, message: "请输入银行卡支持币种", trigger: "blur" }],
};
// 提交
const submit = (dialogForm) => {
    dialogFormRef.value
        .validate()
        .then(async () => {
            try {
                const param = Object.assign({}, dialogForm);
                emits("submitForm", param);
            } catch (error) {
                console.log(error);
            }
        })
        .catch((error) => {
            console.log(error);
        });
};
</script>
  